import { motion } from 'framer-motion';
import type { Todo } from '../store/types';
import { useTodoStore } from '../store/useTodoStore';
import xcn from 'xcn';

interface Props {
  todo: Todo;
}

export const TodoItem = ({ todo }: Props) => {
  const toggleTodo = useTodoStore(state => state.toggleTodo);
  const deleteTodo = useTodoStore(state => state.deleteTodo);

  return (
    <motion.div
      layout
      initial={{ opacity: 0, y: 20 }}
      animate={{
        opacity: 1,
        y: 0,
      }}
      exit={{
        opacity: 0,
        x: 100,
      }}
      className={xcn('todo-item', todo.completed ? 'completed' : '')}
    >
      <div className={xcn('todo-content')} onClick={() => toggleTodo(todo.id)}>
        <input type="checkbox" checked={todo.completed} readOnly />
        <span>{todo.text}</span>
      </div>
      <button className="delete-btn" onClick={() => deleteTodo(todo.id)}>
        x
      </button>
    </motion.div>
  );
};